<template>
  <div margin="pading:15px">
    摄像机
    <a-select style="width: 20%" v-model="thingID">
      <a-select-option 
        v-for="(item, index) in ipcs"
        :key="index"
        :value="item.uid"
        >{{ item.s_name }}</a-select-option
      >
    </a-select>
    <a-button @click="refreshVideoOptions">获取视频地址</a-button>
    码流
    <a-select v-model="videoAddr" style="width: 220px" allowClear>
      <a-select-option
        style="width: 300px"
        v-for="(item, index) in videoStream.stream_options"
        :key="index"
        :value="item.video_addr_option.flv_over_ws"
      >
        {{ item.name }}
      </a-select-option>
    </a-select>
    <div style="margin-top:15px;padding:5px;max-height:530px">
      <a-button :disabled="videoAddr == ''" @click="play">播放</a-button>
      <a-button @click="stop">停止</a-button>
      <div id="videoWnd">
        <video
          name="videoElement"
          class="centeredVideo"
          id="videoElement"
          controls
          width="1024"
          height="576"
          autoplay
        >
          Your browser is too old which doesn't support HTML5 video.
        </video>
      </div>
    </div>
  </div>
</template>
<script>
let flvjs = require("@/services/player/flv.js");
import { getVideoOptions } from "@/services/dataAPI";
export default {
  data() {
    return {
      thingID: "",
      videoAddr: "",
      videoStream: {},
      flvPlayer: null,
    };
  },
  computed: {
    ipcs() {
      let athing = this.$store.state.thingView.activeThing;
      if (athing) {
        let sid = athing.backInfo.station_id;
        if (sid) {
          let station = this.$store.state.thingView.thingCache[sid];
          if (station && station.children) {
            return station.children.filter((c) => {
              return (
                c.model_id == "ipc" || c.model_id == "m_SlTrLORmaPXHeS3Xrocpz"
              );
            });
          }
        }
      }
      return [];
    },
  },

  methods: {
    refreshVideoOptions() {
      const _this = this;
      getVideoOptions(this.thingID).then((option) => {
        _this.videoStream = option;
        _this.videoAddr = undefined;
      });
    },

    play() {
      var videoElement = document.getElementById("videoElement");
      this.flvPlayer = flvjs.createPlayer({
        type: "flv",
        isLive: true,
        hasAudio: false,
        hasVideo: true,
        enableStashBuffer: true,
        url: this.videoAddr,
      });
      this.flvPlayer.attachMediaElement(videoElement);
      this.flvPlayer.on("scriptdata_arrived", function (e) {
        if (e.onTimeUpdate) {
          console.log("on script data ....." + e.onTimeUpdate.abstime);
        }
      });
      this.flvPlayer.load();
      this.flvPlayer.play();
    },
    stop() {
      if (this.flvPlayer) {
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
    },
  },
};
</script>
